<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		块级元素
		1.能够设置宽和高
		2.当内容不足一行时也要占据一行的宽度
		3.能够设置padding，border
		行内元素
		1.设置宽和高不起效果
		2.占地面积完全由内容决定
		3.能够设置padding，border
		
		padding（内边距）
		当我们设置四个值时，从向上方向开始，按照顺时针依次赋值
		当我们设置三个值时，从向上方向开始，左右padding一致，上下padding不一致
		当我们设置三个值时，从向上方向开始，第一个值是上下padding，第二个值是左右padding
		border（边框）
		border-with用来设置宽度
		border-style设置边框纹理solid dashed
		border-color设置边框颜色red #87ceeb rgb（0—255，0—255，0—255）
		
		标签的占地面积=content+padding+border
		-->
		<style type="text/css">
			h1{
				width: 200px;
				height: 200px;
				background-color: #87ceeb;
				padding: 100px;
				/* border-width: 10px;
				border-style: dashed;
				border-color: purple; */
				border: 10px double purple;
				margin: 50px;
			}
			
			span{
				width: 200px;
				height: 200px;
				background-color: #ff0000;
				padding: 100px;
				border: 10px double purple;
			}
		</style>
		<h1>我是h1标签</h1>
		<span>文本标签</span>
	</body>
</html>
